<template>
  <div class="page-container-padding">
    <div>
      <span>记录状态：</span>
      <span>
        <el-select v-model="recordData.state" size="mini">
          <el-option :value="0" label="未处理"></el-option>
          <el-option :value="1" label="已通过"></el-option>
          <el-option :value="2" label="已完成"></el-option>
          <el-option :value="-1" label="已拒绝"></el-option>
        </el-select>
      </span>
      <span style="margin-left: 8px">
        <el-button type="primary" size="mini" @click="toQueryData">
          查询
        </el-button>
      </span>
    </div>
    <div style="margin-top: 16px">
      <el-table
        :data="recordData.data"
        border
        stripe
        :row-key="getRowKeys"
        :expand-row-keys="expands"
        @expand-change="expandChangeHandler"
      >
        <el-table-column label="管理" type="expand" width="70">
          <template #default="scope">
            <div v-if="scope.row.state <= 0" style="padding-left: 70px">
              <el-form label-width="70">
                <el-form-item label="报告要求：">
                  {{ scope.row.content }}
                </el-form-item>
                <el-form-item label="是否接受：">
                  <div style="display: flex">
                    <el-select v-model="toWorker.row_state" size="mini">
                      <el-option :value="1" label="通过" />
                      <el-option :value="-1" label="拒绝" />
                    </el-select>
                    <el-input
                      v-show="toWorker.row_state === -1"
                      v-model="toWorker.state_plain"
                      placeholder="拒绝时可在此填写拒绝的理由"
                      size="mini"
                      style="margin-left: 4px"
                    ></el-input>
                  </div>
                </el-form-item>
                <el-form-item label="任务分配：">
                  <el-select
                    v-model="toWorker.worker_id"
                    filterable
                    clearable
                    remote
                    size="mini"
                    placeholder="输入名字搜索"
                    :remote-method="getUserByName"
                    :loading="toWorker.userLoading"
                  >
                    <el-option
                      v-for="user in toWorker.userList"
                      :key="user.id"
                      :value="user.id"
                      :label="user.admin_name"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    size="mini"
                    style="margin-left: 82px"
                    @click="toDispatchWorker(scope.row)"
                  >
                    确定保存
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
            <div v-else>
              <div style="padding-left: 70px">
                <el-form label-width="70">
                  <el-form-item label="报告要求：">
                    {{ scope.row.content }}
                  </el-form-item>
                  <el-form-item label="附件材料：">
                    <span>
                      <a :href="scope.row.annex_url" target="_blank">
                        {{ scope.row.annex_name }}
                      </a>
                    </span>
                  </el-form-item>
                </el-form>
                <div class="hand-action">
                  <el-button
                    size="mini"
                    type="primary"
                    :loading="activeWorkRecordLoading"
                    @click="toAddWorkRecord"
                  >
                    添加非常态工作
                  </el-button>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="admin_name"
          label="申请人"
          width="160"
          show-overflow-tooltip
        />
        <el-table-column prop="create_time" label="创建时间" width="160" />
        <el-table-column prop="title" label="主题" />
        <el-table-column prop="company_name" label="报告对象" />
        <el-table-column prop="finish_time" label="完成时间" width="160" />
        <el-table-column
          show-overflow-tooltip
          prop="link_msg"
          label="联系方式"
        />
        <el-table-column label="状态" width="70">
          <template #default="scope">
            <div :class="scope.row.state < 0 ? 'red' : 'green'">
              {{ scope.row.state_text }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页码器 -->
    <div style="margin-top: 8px">
      <el-pagination
        style="margin-top: 5px"
        background
        hide-on-single-page
        :current-page="recordData.page"
        :page-size="recordData.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="recordData.totalCount"
        @current-change="currentPageChanged"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
  import { GetUserListByName } from '@/api/systemManage/userInfo'
  import {
    QueryAnaysisReportline,
    DispatchAnaysisReport,
    ActiveAddSpecialRecord,
  } from '@/api/prodService/analysisReport'
  export default {
    data() {
      return {
        recordData: {
          data: [],
          page: 1,
          pageSize: 30,
          state: 0,
          totalCount: 0,
        },
        toWorker: {
          userLoading: false,
          userList: [],
          worker_id: null,
          record_id: -1,
          row_state: 1,
          state_plain: '',
        },
        expands: [],
        activeWorkRecordLoading: false,
      }
    },
    mounted() {
      this.getTableData()
    },
    methods: {
      getTableData() {
        QueryAnaysisReportline(
          this.recordData.page,
          this.recordData.pageSize,
          this.recordData.state
        ).then((res) => {
          // console.log(res)
          const data = res.data
          this.recordData.data = data.data
          this.recordData.page = data.page
          this.recordData.totalCount = data.total_count
        })
      },
      currentPageChanged(page) {
        this.recordData.page = page
      },
      toQueryData() {
        this.recordData.page = 1
        this.getTableData()
      },
      getRowKeys(row) {
        return row.id
      },
      // 展开的事件
      expandChangeHandler(row, expandedRows) {
        if (expandedRows.length) {
          this.expands = []
          if (row) {
            this.expands.push(row.id)
            this.toWorker.record_id = row.id
            if (row.state === -1) {
              this.toWorker.row_state = -1
              this.toWorker.state_plain = row.state_plain
            }
          }
        } else {
          this.expands = []
        }
      },

      // 使用名称搜索用户
      getUserByName(name) {
        if (name === '') {
          return
        }
        this.toWorker.userLoading = true
        GetUserListByName(name).then((res) => {
          this.toWorker.userList = res.data
          this.toWorker.userLoading = false
        })
      },

      // 分配任务，改变状态
      toDispatchWorker(row) {
        console.log(row)
        if (this.toWorker.record_id !== this.expands[0]) {
          this.$baseMessage('程序内部错误,操作对象ID ERROR!', 'error')
          return
        }
        if (!this.toWorker.worker_id && this.toWorker.row_state !== -1) {
          this.$baseMessage('您还未选择分配给的人员!', 'error')
          return
        }
        const bodyData = {
          rid: this.toWorker.record_id,
          worker_id: this.toWorker.worker_id,
          state: this.toWorker.row_state,
          explain_state: this.toWorker.state_plain,
        }
        if (bodyData.state == -1) {
          bodyData.worker_id = 0
        }
        DispatchAnaysisReport(bodyData).then((res) => {
          this.$baseMessage(res.msg, 'success')
          this.getTableData()
        })
      },

      // 手动将记录添加到非常态工作
      toAddWorkRecord() {
        if (this.toWorker.record_id !== this.expands[0]) {
          this.$baseMessage('程序内部错误,操作对象ID ERROR!', 'error')
          return
        }
        this.$baseConfirm(
          '您将在非常态工作中新增一条记录，确定吗?',
          '操作确认',
          () => {
            ActiveAddSpecialRecord(this.toWorker.record_id).then((res) => {
              this.$baseMessage(res.msg, 'success')
            })
          }
        )
      },
    },
  }
</script>
<style scoped lang="scss">
  .green {
    color: #0dd068;
  }
  .red {
    color: #e74736;
  }
  .hand-action {
    text-align: right;
    margin: 0 8px 16px 0;
    cursor: pointer;
  }

  .el-table ::v-deep .el-table__expand-icon {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .el-table ::v-deep .el-table__expand-icon .el-icon-arrow-right:before {
    content: '\e6d9';
    // border: 1px solid #ccc;
    // padding: 2px;
    font-weight: 700;
    color: #f74e1e;
  }

  .el-table
    ::v-deep
    .el-table__expand-icon--expanded
    .el-icon-arrow-right:before {
    content: '\e6d8';
  }
</style>
